@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.a4a-carousel {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@include break-medium {
		gap: 32px;
	}
}

.a4a-carousel__navigation {
	text-align: end;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 16px;
	padding-block-end: 16px;

	@include break-medium {
		gap: 8px;
		padding-block-end: 0;
	}
}

.a4a-carousel__navigation-button {
	background-color: var(--color-surface);
	border-radius: 50%!important;
	min-width: 24px;
	max-height: 24px;
	padding: 0;
	opacity: 0.9;

	&:disabled {
		opacity: 0.5;
	}
}

.a4a-carousel__content {
	display: grid;
	grid-auto-flow: column;
	gap: 16px;
	width: max-content;
	transform: translateX( 0 );
	transition: transform .2s ease-out;
}

.a4a-carousel:not(.is-touch-active) .a4a-carousel__content {
	transition: transform .75s cubic-bezier(.5,0,.5,1);
}
